<template>
  <div style="padding: 40px">

    <div style="margin: 10px 0;">
      <el-button v-if="userRole === 'student'" type="primary" style="margin-left: 10px;" @click="add">创建反馈</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%;" header-align="center" align="center">
      <el-table-column label="反馈ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="学生姓名" width="100px"  header-align="center" align="center" v-if="userRole === 'admin' " />
      <el-table-column prop="feedbackType" label="反馈类型" header-align="center" align="center"/>
      <el-table-column prop="content" label="反馈内容" header-align="center" align="center"/>
      <el-table-column prop="reply" label="反馈答复" header-align="center" align="center"/>
      <el-table-column fixed="right" label="操作" width="200px" header-align="center" align="center" v-if="userRole === 'admin' " >
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button  v-if="userRole === 'admin'" type="primary"  @click="handleEdit1(scope.row)">回复反馈</el-button>
          <!-- 删除按钮 -->
          <el-popconfirm  v-if="userRole === 'admin'" title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="创建反馈" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="反馈类型:">
          <el-select v-model="form.feedbackType" style="width: 50%">
            <el-option label="建议" value="建议"></el-option>
            <el-option label="问题" value="问题"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈内容:">
          <el-input v-model="form.content" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

     <!--修改请假状态    -->
    <el-dialog :visible.sync="dialogVisible3" title="回复反馈" width="30%">

      <el-form :model="form2" label-width="120px">
        <el-form-item label="反馈回复">
          <el-input v-model="form2.reply" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit1">确定</el-button>
      </span>
    </el-dialog>
    <!--  分页器-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {
  getGuanliyuanQianDao,

  getGuanliyuanQingAll,
  getGuansDeleteQing, getStudenQianDaoAll, getUpDateQingJia,
} from '@/http/categories.js'
import moment from "moment/moment";

export default {


  data() {
    return {
      form: {
        "current": 0,
        "endDate": "",
        "pageSize": 0,
        "reason": "",
        "sortField": "",
        "sortOrder": "",
        "startDate": "",
        "status": "",
        "studentName": ""
      },

      form2:{
        "id": 0,
        "reply": ""
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],

    }

  },
  created() {
    this.load()
  },



  methods: {


    async load() {
      let data = {} // 声明 data 变量

      if (this.userRole === 'admin') {
        const response = await getGuanliyuanQingAll({ current: this.currentPage, size: this.pageSize })
        data = response.data
      } else if (this.userRole === 'student') {
        const response = await getStudenQianDaoAll({ current: this.currentPage, size: this.pageSize })
        data = response.data
      }

      console.log(data)
      this.tableData = data.records || []
      this.total = Number(data.total) || 0
    },
    add() {
      this.dialogVisible = true
      this.form = {
        "content": "",
        "feedbackType": ""
      }
    },
    // 确认添加
    async save() {
      const {code, message} = await getGuanliyuanQianDao(this.form)
      console.log(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "添加失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    // 回复反馈
    handleEdit1(row) {
      console.log(row);
      this.form2 = { ...row }
      this.dialogVisible3 = true
    },
    // 回复反馈
    async saveEdit1() {
      const { code, message } = await getUpDateQingJia({
        "id": this.form2.id,
        "reply": this.form2.reply
      })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "回复成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "回复失败"
        })
      }
      this.dialogVisible3 = false
      this.load()
    },
    // 删除反馈
    async handleDelete(id) {

      const { code, message } = await  getGuansDeleteQing({ id:id})

      // 两个等号和三个等号的区别
      // 两个等号： 两边类型相同直接比较  两边类型不同 可以将他们转化为相同的类型 再进行比较
      // 三个等号： 在进行比较时，不会进行任何类型的转换 只有当两个值的类型和值都相等时，才会返回true

      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },

    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getGuanliyuanQingAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }

  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>
